<template>
  <div class="addCompent">
    <el-table :data="couponList" border="" style="width: 80%">
      <el-table-column label="选择优惠券类型" width="180">
        <template slot-scope="couponList">
          <el-select
            v-model="couponList.row.couponType"
            placeholder="请选择"
            @change="selectType"
          >
            <el-option
              v-for="item in modelList"
              :key="item.id"
              :label="item.couponType"
              :value="item.id"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="优惠券规则" width="250">
        <template slot-scope="couponList">
          <div v-if="couponList.row.couponType === 0" class="ruleStyle">
            <el-input-number
              :min="0"
              :max="10"
              :controls="false"
              v-model="couponList.row.discount"
              class="ruleStyle__firIpt"
              @blur="vaildInput($event)"
            ></el-input-number
            >折，无门槛使用
          </div>
          <div v-if="couponList.row.couponType === 1" class="ruleStyle">
            <el-input-number
              :min="0"
              :controls="false"
              v-model="couponList.row.discountAmount"
              @blur="vaildNumInput($event)"
              class="ruleStyle__firIpt"
            ></el-input-number
            >元，无门槛使用
          </div>
          <div v-if="couponList.row.couponType === 2" class="ruleStyle">
            满
            <el-input-number
              :min="0"
              :controls="false"
              v-model="couponList.row.conditionAmount"
              class="ruleStyle__firIpt"
              @blur="vaildNumInput($event)"
            ></el-input-number
            >元，打
            <el-input-number
              :min="0"
              :max="10"
              :controls="false"
              v-model="couponList.row.discount"
              class="ruleStyle__secIpt"
              @blur="vaildInput($event)"
            ></el-input-number
            >折
          </div>
          <div v-if="couponList.row.couponType === 3" class="ruleStyle">
            满
            <el-input-number
              :min="0"
              :controls="false"
              v-model="couponList.row.conditionAmount"
              class="ruleStyle__firIpt"
              @blur="vaildNumInput($event)"
            ></el-input-number
            >元，减
            <el-input-number
              :min="0"
              :controls="false"
              v-model="couponList.row.discountAmount"
              class="ruleStyle__secIpt"
              @blur="vaildNumInput($event)"
            ></el-input-number
            >元
          </div>
        </template>
      </el-table-column>
      <el-table-column label="发行量(张)">
        <template slot-scope="couponList">
          <el-input-number
            :min="0"
            step-strictly
            :step="1"
            :controls="false"
            v-model="couponList.row.issueQuantity"
            style="width: 80px"
            @blur="vaildNumInput($event)"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="限领(张/人)">
        <template slot-scope="couponList">
          <el-input-number
            :min="0"
            :step="1"
            step-strictly
            :controls="false"
            v-model="couponList.row.limitQuantity"
            style="width: 80px"
            @blur="vaildNumInput($event)"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="积分价">
        <template slot-scope="couponList">
          <el-input-number
            :min="0"
            step-strictly
            :step="1"
            :controls="false"
            v-model="couponList.row.integral"
            style="width: 60px"
            @blur="vaildNumInput($event)"
          ></el-input-number>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component
export default class AddCouponTable extends Vue {
  @Prop({
    type: Object,
    default() {
      return {};
    },
  })
  couponContent: any;

  @Watch("couponContent")
  getCouponDetail() {
    this.getCoupon();
  }

  /** 验证状态 */
  validType = false;

  couponList = [
    {
      couponType: 0,
      discount: "", // 优惠折扣
      discountAmount: "", // 优惠金额
      conditionAmount: "", // 满足条件金额
      issueQuantity: "", // 发行数量
      limitQuantity: "", // 限领张数
      integral: "", // 所需积分
    },
  ];

  /** 可选择优惠券列表 */
  modelList = [
    {
      id: 0,
      couponType: "无门槛折扣劵",
    },
    {
      id: 1,
      couponType: "无门槛现金劵",
    },
    {
      id: 2,
      couponType: "满折劵",
    },
    {
      id: 3,
      couponType: "满减劵",
    },
  ];

  /**
   * 编辑获得优惠券信息
   */
  getCoupon() {
    const temOption = JSON.parse(JSON.stringify(this.couponContent));
    this.couponList[0].couponType = temOption.couponType;
    this.couponList[0].discount = temOption.discount;
    this.couponList[0].discountAmount = temOption.discountAmount;
    this.couponList[0].conditionAmount = temOption.conditionAmount;
    this.couponList[0].issueQuantity = temOption.issueQuantity;
    this.couponList[0].limitQuantity = temOption.limitQuantity;
    this.couponList[0].integral = temOption.integral;
    this.validType = true;
  }

  /**
   * 选择优惠券
   */
  selectType(e) {
    this.couponList[0].couponType = e;
    this.couponList[0].discount = "";
    this.couponList[0].discountAmount = "";
    this.couponList[0].conditionAmount = "";
    this.couponList[0].issueQuantity = "";
    this.couponList[0].limitQuantity = "";
    this.couponList[0].integral = "";
  }

  /**
   * 输入折扣验证
   */
  vaildInput(e) {
    const regs = /^([0-9])(\.[0-9])?$/;
    this.validType = regs.test(e.target.value);
    if (!regs.test(e.target.value)) {
      e.target.value = "";
      this.couponList[0].discount = "";
    }
  }

  /**
   * 输入数字验证
   */
  vaildNumInput(e) {
    const regs = /^[0-9]*[1-9][0-9]*$/;
    this.validType = regs.test(e.target.value);
    if (!regs.test(e.target.value)) {
      e.target.value = "";
    }
  }
}
</script>

<style lang="scss" scoped>
.addCompent {
  margin-top: 10px;
  margin-bottom: 20px;
}
@include b(ruleStyle) {
  @include flex(center, center);
  @include e(firIpt) {
    width: 80px;
    margin: 0px 5px;
  }
  @include e(secIpt) {
    width: 60px;
    margin: 0px 5px;
  }
}
</style>
